<!-- components/BannerSwiper.vue -->
<template>
  <view class="banner-swiper">
    <swiper class="swiper"
      :indicator-dots="true"
      :autoplay="true"
      :interval="3000"
      :duration="500"
      :circular="true"
      :indicator-color="indicatorColor"
      :indicator-active-color="indicatorActiveColor"
    >
      <swiper-item v-for="(item, index) in bannerList" :key="index">
        <view class="swiper-item" :style="getBannerStyle(item)">
          <view class="banner-content">
            <view class="text-content">
              <view class="main-text">{{ item.mainText }}</view>
              <view class="highlight-text">{{ item.highlightText }}</view>
            </view>
            <image :src="item.image" mode="aspectFit" class="banner-image"/>
          </view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'BannerSwiper',
  setup() {
    const indicatorColor = 'rgba(255, 255, 255, 0.5)'
    const indicatorActiveColor = '#FF6B35'
    
    const bannerList = ref([
      {
      
        image: '/static/print/print1.jpg',
        startColor: '#FFF4F0',
        endColor: '#FFE8E0'
      },
      {
       
       image: '/static/print/print2.jpg',
        startColor: '#FFF6E5',
        endColor: '#FFEAC7'
      },
      {
        
        image: '/static/print/print4.jpg',
        startColor: '#F0FFF4',
        endColor: '#DCFFDF'
      },
      {
       
        image: '/static/print/print5.jpg',
        startColor: '#FFF0F6',
        endColor: '#FFDCE2'
      },
      {
        
        image: '/static/print/print3.jpg',
        startColor: '#F5F0FF',
        endColor: '#E1DCFF'
      }
    ])
    
    const getBannerStyle = (item) => {
      return {
        background: `linear-gradient(to right, ${item.startColor}, ${item.endColor})`
      }
    }
    
    return {
      bannerList,
      indicatorColor,
      indicatorActiveColor,
      getBannerStyle
    }
  }
}
</script>

<style scoped>
.banner-swiper {
  width: 100%;
  height: 160rpx;
  background: #fff;
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-item {
  width: 100%;
  height: 90%;

}

.banner-content {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40rpx;
}

.text-content {
  flex: 1;
}


.banner-image {
  width: 1040rpx;
  height: 200rpx;
  margin-block: 20rpx;
background:repeat;
}

/* 自定义指示点样式 */
:deep(.uni-swiper-dots-horizontal) {
  bottom: 20rpx;
}

:deep(.uni-swiper-dot) {
  width: 12rpx;
  height: 12rpx;
  border-radius: 6rpx;
  margin: 0 6rpx;
  transition: all 0.3s;
}

:deep(.uni-swiper-dot-active) {
  width: 24rpx;
}
</style>